@charset "UTF-8";

//首页共同样式
//头部样式
@mixin header() {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    //logo&搜索栏样式
    >.search {
        width: 100%;
        border-bottom: r(1px) solid #d9d9d9;
        background: #b20000;
        position: relative;
        font-size: 0;
        padding: r(25px) r(0px);
        overflow: hidden;
        //logo样式
        a:nth-of-type(3){
            width: r(264px);
            height: r(39px);
            display: block;
            margin: 0 auto;
            img{
                width: 100%;
                height: 100%;
            }
        }
        //icon样式
        //共同样式
        .iconfont {
            font-family: "iconfont" !important;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: white;
        }
        //搜索&头像样式
        a:first-of-type,a:nth-of-type(2){
            display: inline-block;
            width: r(42px);
            height: r(42px);
        }
        .icon-sousuo,.icon-touxiang{
            font-size: r(42px);
        }
        a:first-of-type{
            margin-right: r(19px);
        }
        a:nth-of-type(2){
            margin-right: r(20px);
        }
        //菜单样式
        .icon-caidan1{
            font-size: r(48px);
            margin-left: r(23px);
        }
    }
    //阿里妈妈logo栏样式
    .alimama {
        border-left: r(1px) solid #d9d9d9;
        border-right: r(1px) solid #d9d9d9;
        font-size: 0px;
        padding: r(13px) r(0px) r(14px) r(0px);
        background: white;
        img {
            display: inline-block;
        }
        >.logo2 {
            width: r(125px);
            height: r(17px);
            margin-left: r(26px);
            margin-bottom: r(5px);
        }
        >.alimamaImg {
            width: r(65px);
            height: r(23px);
            margin-left: r(16px);
        }
    }
}
//尾部样式
@mixin footer() {
    width: 100%;
    background: #f5f5f5;
    border-top: r(1px) solid #bbb9ba;
    font-size: 0px;
    position: fixed;
    bottom: 0;
    left: 0;
    a {
        display: inline-block;
        text-align: center;
        color: #8b8b8b;
        width: 20%;
        font-size: r(18px);
        position: relative;
        img {
            display: block;
            margin: 0 auto;
            margin-top: r(19px);
        }     
        span {
            display: block;
            margin: r(10px) r(0px);
        }
        .before:before{
            content: "";
            width: r(1px);
            height: r(50px);
            background: #e8e8e8;
            position: absolute;   
            left: r(-1px);
            top: r(30px);         
        }
    }
    a:first-of-type{
        img{
            width: r(47px);
            height: r(38px);            
        }
    }
    a:nth-of-type(2){
        img{
            width: r(47px);
            height: r(40px);            
        }
    }
    a:nth-of-type(3){
        img{
            width: r(41px);
            height: r(41px);             
        }
    }
    a:nth-child(4){
        img{
             width: r(42px);
            height: r(46px);            
        }
    }
    a:nth-of-type(5){
        img{
            width: r(74px);
            height: r(43px);             
        }
           
    }
}



//文章页共用样式
//资讯内容样式
@mixin information() {
    width: 100%;
    background: white;
    font-size: 0px;
    //第一篇&第二篇样式
    .first,
    .second {
        width: r(583px);
        margin: 0 auto;
        border-bottom: r(1px) solid #e2e2e2;
        //左边内容
        .left {
            width: r(324px);
            position: relative;
            a {
                display: block;
                font-size: r(24px);
                color: black;
                padding-bottom: r(26px);
            }
            span {
                font-size: r(21px);
                color: #c5c5c5;
            }
            span:first-of-type{
                margin-left: r(24px);
            }
            >img {
                width: r(19px);
                height: r(17px);
                position: absolute;
                margin-top: r(7px);
            }
        }
        //右边图片
        .right {
            width: r(209px);
            margin-left: r(50px);
            >img {
                width: 100%;
                height: r(116px);
                margin-bottom: r(19px);
            }
        }
    }
    //第二篇边距
    .second {
        margin-top: r(16px);
    }
}


//弹窗共用样式
@mixin loginMask(){
        width: 100%;
        height: 100%;
        background: #222222;
        position: absolute;
        transition: all .5s;
        transform: translateX(-100%);
        transform: translate3d(-100%,0,0);
        font-size: 0;
        z-index: 1;
        margin-top: -67px;
        //菜单栏
        .login-search{
            width: 100%;
            padding: r(20px) r(26px) r(17px) r(12px);
            border-bottom: r(1px) solid #484848;
            position: relative;
            //关闭页面按钮
            .icon-dankuangguanbianniu{
                font-size: r(50px);
                height: r(50px);
                font-weight: bold;
                color: red;
            } 
            input{
                width: r(534px);
                border: r(2px) solid #FFFFFF;
                border-radius: r(19px);
                height: r(52px);
                vertical-align: top;
                margin-left: r(15px);
                padding: 0 r(17px) 0 r(57px);
                background: #222222;
                color: white;
            }   
            //搜索图标
            .iconfont {
                font-family: "iconfont" !important;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                color: white;
            }      
            .icon-sousuo{
                position: absolute;
                left: r(96px);
                top: r(32px);
            }
        }

        //个人信息显示
        .login-msg{
            width: 100%;
            padding-top: r(33px);
            //头像
            >a:first-of-type{
                display: block;
                width: r(128px);
                height: r(129px);
                margin: 0 auto;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            //姓名
            .login-name{
                text-align: center;
                color: white;
                margin-top: r(16px);
                span:first-of-type{
                    font-size: r(25px);
                    line-height: 100%;
                }
                span:last-of-type{
                    border: r(1px) solid white;
                    font-size: r(15px);
                    padding: r(2px) r(10px) r(3px) r(12px);
                    margin-left: r(10px);
                }
            }
            //星星
            .stars{
                text-align: center;
                color: #eeca02;
                margin-top: r(8px);
            }
            //粉丝关注
            .fans{
                width: 100%;
                text-align: center;
                position: relative;
                span{
                    font-size: r(23px);
                    color: white;
                    display: inline-block;
                    a{
                        font-size: r(19px);
                        display: inline-block;
                        width: r(19px);
                        height: r(19px);
                        color: red;
                        font-weight: bold;
                    }
                }
                span:first-of-type{
                    a{
                        margin-left: r(9px);
                    }
                }
                span:first-of-type:after{
                    content: "";
                    width: r(2px);
                    height: r(22px);
                    background: #a2a2a2;
                    position: absolute;
                    left: r(320px);
                    top: r(7px);
                }
                span:last-of-type{
                    margin-left: r(24px);
                    a{
                        margin-left: r(8px);
                    }
                }
            }
            //收藏&发布按钮
            >a:nth-of-type(2),>a:nth-of-type(3){
                width: r(219px);
                height: r(52px);
                line-height: r(25px);
                display: inline-block;
                font-size: r(24px);
                text-align: center;
                padding: r(14px) r(61px) r(14px) r(58px);
                color: white;
                border-radius: r(23px);
                margin-top: r(20px);
            }
            >a:nth-of-type(2){
                background: #b60005;
                margin-left: r(90px);
            }
            >a:nth-of-type(3){
                background: #cdcdcd;
                margin-left: r(22px);
            }
            //装饰条
            .loginNull{
                width: 100%;
                height: r(24px);
                background: #303030;
                margin-top: r(20px);
            }
            //选项
            .option{
                font-size: r(23px);
                color: #656565;
                display: block;
                width: r(575px);
                height: r(88px);
                margin: 0 auto;
                line-height: r(88px);
            }
            .option-bottom{
                border-bottom: r(1px) solid #323232;                
            }
            //退出按钮
            .out{
                display: block;
                margin: 0 auto;
                width: r(180px);
                height: r(52px);
                line-height: r(52px);
                background: #b60005;
                color: white;
                font-size: r(22px);
                text-align: center;
                border-radius: r(22px);
                margin-top: r(23px);
            }
        }    
}
